<eqm-loading *ngIf="!selectedPreset || !presets"></eqm-loading>
<div *ngIf="selectedPreset && presets" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="5px" fxFlex>
  <div fxLayout="row">
    <div fxLayout="column">
      <div fxLayout="row" fxLayoutAlign="center center" style="width: 100%;">
        <eqm-checkbox labelSide="right" [checked]="peakLimiter" (checkedChange)="setPeakLimiter($event)">Peak Limiter</eqm-checkbox>
        <eqm-question
          [eqmTooltip]="
            'Enable if you hear Distortion when increasing Gain.\nThis will decrease the Global Gain \n to make sure the sound never clips.\nThen increase the overall volume to compensate'
          "
        ></eqm-question>
      </div>
    </div>
  </div>

  <!-- Knobs -->
  <div *ngIf="!replaceKnobsWithSliders" class="basic-level-knobs"  style="width: 100%;" fxLayout="row" fxLayoutAlign="space-around center">
    <div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="5px">
      <eqm-label>BASS</eqm-label>
      <eqm-knob #bassKnob size="large" [controlStyle]="ui.settings.knobControlStyle" [enabled]="enabled" [min]="-24" [max]="24" [(value)]="gains.bass"
        (userChangedValue)="setGain('bass', $event)" [stickToMiddle]="stickSlidersToMiddle"
        (stickedToMiddle)="performHapticFeedback($event)" [animationDuration]="animationDuration"
        [animationFps]="animationFps"></eqm-knob>
      <eqm-value-screen [enabled]="enabled">{{screenValue(gains.bass)}}</eqm-value-screen>
    </div>
    <div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="5px">
      <eqm-label>MID</eqm-label>
      <eqm-knob #bassKnob size="large" [enabled]="enabled" [controlStyle]="ui.settings.knobControlStyle" [min]="-24" [max]="24" [(value)]="gains.mid"
        (userChangedValue)="setGain('mid', $event)" [stickToMiddle]="stickSlidersToMiddle"
        (stickedToMiddle)="performHapticFeedback($event)" [animationDuration]="animationDuration"
        [animationFps]="animationFps"></eqm-knob>
      <eqm-value-screen [enabled]="enabled">{{screenValue(gains.mid)}}</eqm-value-screen>
    </div>
    <div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="5px">
      <eqm-label>TREBLE</eqm-label>
      <eqm-knob #bassKnob size="large" [enabled]="enabled" [controlStyle]="ui.settings.knobControlStyle" [min]="-24" [max]="24" [(value)]="gains.treble"
        (userChangedValue)="setGain('treble', $event)" [stickToMiddle]="stickSlidersToMiddle"
        (stickedToMiddle)="performHapticFeedback($event)" [animationDuration]="animationDuration"
        [animationFps]="animationFps"></eqm-knob>
      <eqm-value-screen [enabled]="enabled">{{screenValue(gains.treble)}}</eqm-value-screen>
    </div>
  </div>

  <!-- Sliders -->
  <div *ngIf="replaceKnobsWithSliders" class="basic-level-sliders w-100" fxLayoutGap="10px" fxLayout="column" fxLayoutAlign="space-around center">
    <div fxLayout="row" class="w-100" fxLayoutAlign="center center" fxLayoutGap="5px">
      <eqm-label fxFlex="52px">BASS</eqm-label>
      <div fxFlex="70%">
        <eqm-flat-slider [enabled]="enabled" [min]="-24" [max]="24" [(value)]="gains.bass" [thickness]="3" [thumbRadius]="6"
          (userChangedValue)="setGain('bass', $event)" [doubleClickToAnimateToMiddle]="true"
          [animationDuration]="animationDuration" [animationFps]="animationFps" [stickToMiddle]="true"
          (stickedToMiddle)="performHapticFeedback($event)"></eqm-flat-slider>
      </div>
      <eqm-value-screen fxFlex="52px" [enabled]="enabled">{{screenValue(gains.bass)}}</eqm-value-screen>
    </div>
    <div fxLayout="row" class="w-100" fxLayoutAlign="center center" fxLayoutGap="5px">
      <eqm-label fxFlex="52px">MID</eqm-label>
      <div fxFlex="70%">
        <eqm-flat-slider [enabled]="enabled" [min]="-24" [max]="24" [(value)]="gains.mid" [thickness]="3" [thumbRadius]="6"
          (userChangedValue)="setGain('mid', $event)" [doubleClickToAnimateToMiddle]="true"
          [animationDuration]="animationDuration" [animationFps]="animationFps" [stickToMiddle]="true"
          (stickedToMiddle)="performHapticFeedback($event)"></eqm-flat-slider>
      </div>
      <eqm-value-screen fxFlex="52px" [enabled]="enabled">{{screenValue(gains.mid)}}</eqm-value-screen>
    </div>
    <div fxLayout="row" class="w-100" fxLayoutAlign="center center" fxLayoutGap="5px">
      <eqm-label fxFlex="52px">TREBLE</eqm-label>
      <div fxFlex="70%">
        <eqm-flat-slider [enabled]="enabled" [min]="-24" [max]="24" [(value)]="gains.treble" [thickness]="3" [thumbRadius]="6"
          (userChangedValue)="setGain('treble', $event)" [doubleClickToAnimateToMiddle]="true"
          [animationDuration]="animationDuration" [animationFps]="animationFps" [stickToMiddle]="true"
          (stickedToMiddle)="performHapticFeedback($event)"></eqm-flat-slider>
      </div>
      <eqm-value-screen fxFlex="52px" [enabled]="enabled">{{screenValue(gains.treble)}}</eqm-value-screen>
    </div>
  </div>
</div>